<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col>
        <el-form ref="fromData" :model="fromData" size="small" :inline="true" label-width="68px">
          <el-form-item>
            <el-select v-model="fromData.capsuleInfoId" placeholder="请选择太空舱基地">
              <el-option v-for="(item ,index) in spaceRoomList" :key="index" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmitsear" icon="el-icon-search" size="mini">查询</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <!-- 列表 -->
        <el-table v-loading="loading" :data="tableData" ref="tableRef" border style="width: 100%" class="mb20">
          <el-table-column prop="subType" label="房间ID" align="center">
          </el-table-column>
          <el-table-column prop="capsuleInfoTitle" label="名称" align="center">
          </el-table-column>
          <el-table-column prop="webManageUserName" label="管理员名称" align="center">
          </el-table-column>
          <el-table-column prop="webManageUserId" label="管理员ID" align="center">
          </el-table-column>
          <el-table-column prop="imgs" label="上报图片" align="center">
            <template slot-scope="scope">
              <el-image class="img" :src="scope.row.imgs.url" :preview-src-list="imgList_"
                @click="choseEventImg(scope.row.imgs.url)">
              </el-image>
            </template>
          </el-table-column>
          <el-table-column prop="subType" label="上报类型" align="center">
            <template slot-scope="scope">
              <div>{{scope.row.subType == 1 ? '维修' : '保洁'}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="subTime" label="上报时间" align="center">
          </el-table-column>
        </el-table>
        <el-pagination background align='right' @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="fromData.pageNum" :page-size="fromData.pageSize"
          layout="prev, pager, next" :total="total">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {
    getSubRecordPage
  } from '@/api/userB/userB'
  import {
    capsuleInfoSelects
  } from '@/api/space/spaceRoom'
  export default {
    data() {
      return {
        loading: true,
        total: 0,
        fromData: {
          capsuleInfoId: null,
          pageNum: 1,
          pageSize: 10
        },
        tableData: [],
        spaceRoomList: [],
        imgList_: []
      }
    },
    created() {
      this.fromData.capsuleInfoId = this.$store.state.user.capsuleInfoId
      this.getSubRecordPage()
      capsuleInfoSelects().then(res => {
        this.spaceRoomList = res.data
      })
    },
    methods: {
      getSubRecordPage() {
        getSubRecordPage(this.fromData).then(res => {
          console.log(res)
          if (res.data.rows.length > 0) {
            res.data.rows.forEach((item, key) => {
              if (JSON.parse(item.imgs).length > 0) {
                this.$set(item, 'imgs', JSON.parse(JSON.parse(item.imgs)))
              }else{
                this.$set(item, 'imgs', {url:''})
              }
            })
          }
          this.tableData = res.data.rows
          this.total = res.data.total
          this.loading = false
        })
      },
      choseEventImg(url) {
        this.imgList_.push(url)
      },
      handleSizeChange(val) {
        this.fromData.pageNum = val
        this.getSubRecordPage()
      },
      handleCurrentChange(val) {
        this.fromData.pageNum = val
        this.getSubRecordPage()
      },
      onSubmitsear() {
        console.log(this.fromData)
        this.getSubRecordPage()
      },
      resetQuery() {
        this.fromData.capsuleInfoId = ''
        this.getSubRecordPage()
      }
    }
  }
</script>

<style>
  .img {
    width: 30px;
    height: 30px;
  }
</style>
